<template>
    <swiper :indicator-dots="false" :autoplay="false" :displayMultipleItems="displayCount" class="swiper-seckill"  :current="current" next-margin="40px">
        <swiper-item v-for="(item, index) in list" :key="index" @click="onClick(index)" :class="{active:current===index}">
            <view class="title">{{item}}场</view>
            <view class="text">{{current===index? '抢购中':'即将开始'}}</view>
        </swiper-item>
    </swiper>
</template>

<script>
    export default {
        name: "swiper-seckill",
        props: {
            list: {
                default: ()=>['8:00','9:00','10:00','11:00','12:00','13:00']
            },
            current:{
                default:0
            },
            displayCount:{
                default:4
            }
        },
        methods: {
            onClick(index) {
                this.$emit('onClick',index);
            },
        }
    }
</script>

<style lang="scss">
    .swiper-seckill{
        height: 64px;
        padding: 16px 0;
        uni-swiper-item{
            &.active{
                opacity: 1;
            }
            text-align: center;
            color: #fff;
            opacity: 0.6;
            .title{
                font-size: 32px;
                line-height: 32px;
                margin-bottom: 8px;
            }
            .text{
                font-size: 24px;
                line-height: 24px;
            }
        }
    }

</style>

